<template>
  <!--自定义查询区域-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="240px">
          <a-form-item label="名称搜索" :label-col="{ style: { width: '70px' } }">
            <a-input id="pathName" v-model:value="queryParam.name" autocomplete="off"/>
          </a-form-item>
        </a-col>
        <a-col flex="240px">
          <a-form-item label="手机号" :label-col="{ style: { width: '70px' } }">
            <a-input id="pathName" v-model:value="queryParam.tel"  autocomplete="off"/>
          </a-form-item>
        </a-col>
        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName">
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
  <!-- table区域-end-->

  <MemberModal @register="registerMemberModal" @success="searchQuery"></MemberModal>
  <MemberAudit @register="registerMemberAudit" @success="searchQuery"></MemberAudit>
  <MemberArea @register="registerMemberArea" @success="searchQuery"></MemberArea>
  
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, nextTick } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn, FormSchema } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { treeGrid, del, approvalPc } from "/@/views/weixin/member/member.api";
import { filterObj } from "/@/utils/common/compUtils";
import { useMessage } from "/@/hooks/web/useMessage";
import { columns } from "/@/views/weixin/member/member.data";

import MemberModal from './MemberModal.vue';
import MemberAudit from './modules/MemberAudit.vue';
import MemberArea from './modules/memberArea.vue';

const $message = useMessage();

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  name: "",
  tel: "",
});

const resetParam = { ...queryParam }

// 列表页面公共参数、方法
const loading = ref<boolean>(false);
const dataSource = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const {prefixCls, tableContext} = useListPage({
  tableProps: {
    rowKey: "id",
    dataSource: dataSource,
    columns: columns,
    size: 'small',
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    showActionColumn: true,
    resizeHeightOffset: 40,
    showSummary: true,
    summaryData: summaryData,
    onExpand: onExpand,
    actionColumn: {
      width: 80
    }
  },
})

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '审核',
      icon: "ant-design:aliyun-outlined",
      color: "success",
      popConfirm: {
        title: '是否确认审核',
        confirm: auditoperation.bind(null, record, "1")
      },
      ifShow: (record.type == '2' && record.state == '0')
    },
    {
      label: '取消',
      icon: "ant-design:aliyun-outlined",
      color: "warning",
      popConfirm: {
        title: '是否取消审核',
        confirm: auditoperation.bind(null, record, "0"),
      },
      ifShow: (record.type == '2' && record.state == '1')
    },
    {
      label: '编辑',
      icon: "ant-design:form-outlined",
      onClick: editoperation.bind(null, record),
      ifShow: record.type == '2'
    },
    {
      label: '通知',
      icon: "ant-design:form-outlined",
      color: "warning",
      onClick: setAreaManagers.bind(null, record),
      ifShow: false
    },
    {
      label: '删除',
      color: 'error',
      icon: 'ant-design:rest-twotone',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
      ifShow: record.type == '2'
    },
  ];
}

//注册table数据
const [registerTable, {reload, expandAll, collapseAll}] = tableContext

//新增订单
const [registerMemberModal, {openModal: openModal}] = useModal();

//审核
const [registerMemberAudit, {openModal: openMemberAuditModal}] = useModal();

//通知
const [registerMemberArea, {openModal: openMemberAreaModal}] = useModal();

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

//双击行
function handleDblclick(record) {
  //alert("handleDblclick" + record.id);
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

//审核功能
function auditoperation(record, state) {
  var params = {}
  if (record.cmsId) {
    params = {id: record.cmsId, state: state}
  } else {
    params = {id: record.id, state: state}
  }
  handleMemberAudit(params);
}

//表单提交事件
async function handleMemberAudit(params) {
  try {
    await approvalPc(params).then((res) => {
      console.info(res)
      if (res.success) {
        $message.createMessage.success(res.message);
        searchQuery();
        //关闭弹窗
      } else {
        $message.createMessage.warning(res.message);
      }
    });
  } finally {
    
  }
}


//编辑功能
function editoperation(record) {
  var params = {}
  if (record.cmsId) {
    params = {id: record.cmsId}
  } else {
    params = {id: record.id}
  }
  openMemberAuditModal(true, params);
  //openModal(true, { isUpdate: true, id: record.id });
}

function setAreaManagers(record, type) {
  if (type == '2') {
    openMemberAreaModal(true, { isUpdate: true, id: record.id, type: record.type });
  } else {
      //tip("设置区域管理者，请选择B类会员！");
      return false;
  }
}

/**
 * 删除事件
 */
async function handleDelete(a) {
  let record = {id: selectRows.id}
  await del(record, searchQuery);
}

async function loadData(params) {
  loading.value = true;
  let result = treeGrid(params);
  loading.value = false;
  return result;
}

/** 点击展开图标时触发 */
async function onExpand(isExpand, rowData) {
  console.info("expandNode@@@@", isExpand, rowData.hasChildren)
  if (isExpand && rowData.isLeaf === "true" && rowData.children.length === 0) {
    let params = {...queryParam, parent_id: rowData.id, type: rowData.type }
    const res = await loadData(filterObj(params));
    rowData.children = res.rows;
  }
}

//
async function loadRootData() {
  const res = await loadData(filterObj(queryParam));
  if (res) {
    dataSource.value = res.rows;
    summaryData.value = res.footer;
    //console.info(dataSource.value)
  } else {
    dataSource.value = [];
    summaryData.value = [];
  }
}

//
function searchQuery() {
  //console.info("searchQuery@@", 11111111);
  loadRootData();
  nextTick(collapseAll);
}

function searchReset() {
  Object.assign(queryParam, resetParam);
  loadRootData();
}

//默认执行查询
searchQuery();

</script>
<style scoped>

</style>
